<template>
	<view>
		<!-- 课程主题 -->
		<!-- video -->
		<video class="course_video" src="http://127.0.0.1:7001/public/lfyimg/video.mp4"></video>
		<!--  -->
		<view v-for="item in details" :key="item.id">
			<view class="lfy_course_con">
				<p class="course_con">
					<span class="name">{{item.courseName}}</span>
					<span class="original_price">¥ {{item.originalPrice}}元</span>
				</p>
				<p class="course_con" style="height: 60upx;line-height: 60upx;">
					<span class="class_hour">{{item.classHour}}</span>
					<span class="join_number">{{item.joinNumber}}人参与</span>
					<span @click="show = true" class="share">
						<img class="share_img" src="http://127.0.0.1:7001/public/lfyimg/lfy_share.png" alt="">
						分享
						<!-- Popup 弹出层 -->
							<u-popup mode="center" :show="show" @open="open" @close="close">
								<!-- 分享 -->
								<view class="share_box" >
									<span v-for="(item, index) in shareList" :key="index" @click="share">
										<img :src="item.shareImg" alt="">
										<p>{{item.shareName}}</p>
									</span>
								</view>
								<u-button @click="show = false">关闭</u-button>
							</u-popup>
						<!-- <view class="success" v-if="show2" >分享成功</view> -->
					</span>
					<span v-if="noPay" @click="showPay=true" class="buy_btn">
						立即购买
						<!-- Popup 弹出层 -->
						<u-popup mode="center" :show="showPay" @open="openPay" @close="closePay">
							<!-- 立即购买 -->
							<!-- :class="{pay:payStyle=index}" -->
							<view @click="pay(index)" v-for="(item, index) in payList" :key="index" class="pay_box">
								<p >{{item.pay1}}</p>
								<p>{{item.pay2}}</p>
							</view>
							<u-button @click="showPay = false">关闭</u-button>
						</u-popup>
					</span>
					<span v-if="yesPay" class="buy_btn">已购买</span>
				</p>
			</view>
			<!-- tabs -->
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="课程介绍" name="first">
					<!-- content -->
					<view class="lfy_con_container">
						<view class="con_box">
							<p class="lfy_title">课程简介</p>
							<p class="intro">{{item.intro}}</p>
						</view>
						<view class="con_box">
							<p class="lfy_title">授课讲师</p>
							<view class="teacher_info">
								<img class="teacher_img" :src="item.teacherImg" alt="">
								<span class="teacher_name">{{item.teacherName}}</span>
								<span class="teacher_job">
									<p>国家高级乐导师</p>
									<p>国际母婴瑜伽联合会授权瑜伽导师</p>
									<p>国际瑜伽协会理事员</p>
								</span>
							</view>
						</view>
						<view class="con_box">
							<p class="lfy_title">适用人群</p>
							<p class="for_people">13-27周阶段练习更有效果</p>
						</view>
						<view class="con_box">
							<p class="lfy_title">注意事项</p>
							<view class="attention">
								<p>{{item.attention1}}</p>
								<p>{{item.attention2}}</p>
								<p>{{item.attention3}}</p>
								<p>{{item.attention4}}</p>
								<p>{{item.attention5}}</p>
							</view>
						</view>
					</view>
				</el-tab-pane>
				<el-tab-pane label="课程评价" name="second">
					<!-- content -->
					<!-- 评价 -->
					<!-- <view class="rate_box">
						<span class="rate_title">总体评价:</span>
						<uni-rate  v-model="rateValue" @change="onChange" size="20" active-color="#8fc31f" />
						<span class="no_rate">暂无星评</span>
					</view> -->
					<!-- 沙发 -->
					<view v-if="pingjia.length == 0" class="sofa_box">
						<img class="sofa_img" src="http://127.0.0.1:7001/public/lfyimg/sofa.png" alt="">
						<p>暂无评价，抢沙发</p>
					</view>
					<!--  -->
					<view class="evaluate_box_mar">
						<view v-if="pingjia.length!=0" v-for="item in pingjia" :key="item.id" class="evaluate_box">
							<img class="head_portrait" :src="item.headPortrait" alt="">
							<view class="evaluate_con">
								<view class="con_1">
									<span class="user_name">{{item.userName}}</span>
									<view class="evaluate_rate">
										<span class="rate_title">星评:</span>
										<uni-rate :readonly="true"  v-model="item.rate" @change="onChange" size="20" active-color="#8fc31f" />
									</view>
								</view>
								<p class="date">{{item.date.slice(0,10)}}</p>
								<p class="content">{{item.content}} </p>
							</view>
						</view>
					</view>

					<!--  -->
					<view class="fixed_box">
						<!-- 发布 -->
						<view class="release_box">
							<u--input v-model="valueCon" placeholder="说点什么吧" border="none"></u--input>
							<p @click="release" class="release_btn">发布</p>
						</view>
						<!-- 评价 -->
						<view style="background-color: #f3f3f3;border: none;" class="rate_box">
							<span class="rate_title">星评:</span>
							<uni-rate class="release_rate" v-model="releaseValue" @change="onChange" size="20" active-color="#8fc31f" />
							<span class="no_rate">星评会根据评价显示（必选）</span>
						</view>
					</view>
				</el-tab-pane>
				<el-tab-pane label="课程讨论" name="third">
					<!-- content -->
					<!-- no_content -->
					<view class="sofa_box" v-if="discuss.length == 0">
						<img style="width: 20%;" class="sofa_img"
							src="http://127.0.0.1:7001/public/lfyimg/no_content.png" alt="">
						<p style="font-size: 28upx;">暂无讨论内容</p>
					</view>
					<!-- 讨论 -->
					<view @click="getDiscussDetails(item)" v-if="discuss.length!=0" v-for="item in discuss"
						:key="item.id" class="discuss_box">
						<p class="topic">话题：{{item.topic}}</p>
						<p class="source">来源：{{item.source}}</p>
						<p class="dis_con_3">
							<span class="see">浏览：{{item.see}}次</span>
							<span class="join">已有{{item.join}}人参与</span>
						</p>
					</view>
					<u-button @click="getCourseDiscuss" type="success" text="发布新话题"></u-button>
				</el-tab-pane>
			</el-tabs>
		</view>
		<!-- 分享 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import shijianc from '@/pages/Home/time.js'
	export default {
		data() {
			return {
				// tabs
				// activeName: 'first',
				activeName: 'second',
				details: [],
				discuss: [],
				pingjia: [],
				// Popup 弹出层
				// 分享
				show: false,
				// 立即购买
				showPay: false,
				// 分享
				// show2:false,
				shareList: [{
					shareImg: 'http://127.0.0.1:7001/public/lfyimg/wx_friends_circle.png',
					shareName: '微信朋友圈'
				}, {
					shareImg: 'http://127.0.0.1:7001/public/lfyimg/wx_friends.png',
					shareName: '微信好友'
				}, {
					shareImg: 'http://127.0.0.1:7001/public/lfyimg/qq_friends.png',
					shareName: 'QQ好友'
				}, {
					shareImg: 'http://127.0.0.1:7001/public/lfyimg/Qzone.png',
					shareName: 'QQ空间'
				}, {
					shareImg: 'http://127.0.0.1:7001/public/lfyimg/sina.png',
					shareName: '新浪微博'
				}],
				payList: [{
					pay1: '确认支付99.00元',
					pay2: '确认支付1020积分'
				}],

				// 星星评分
				releaseValue:'',
				// rateValue:'',
				
				valueCon: '',
				// 立即购买
				noPay: true,
				yesPay: false,

			}
		},
		onShow() {
			this.$api.lfycoursetopic().then((res) => {
					console.log(res)
					this.details = res.data
				}),
				this.$api.lfycoursediscuss().then((res) => {
					console.log(res)
					this.discuss = res.data
				}),
				this.$api.lfycoursepj().then((res) => {
					console.log(res)
					this.pingjia = res.data
					// this.pingjia = res.data.map(item=>{
					// 	item.date = shijianc(Number(item.date))
					// 	return item
					// })
				})

		},
		methods: {
			onChange(e) {
						console.log('rate发生改变:' + JSON.stringify(e))
					},
					
			release() {
				console.log(this.valueCon)
				let a = {
					headPortrait: 'http://127.0.0.1:7001/public/lfyimg/head_portrait_01.png',
					userName: '赵二小姐',
					content: this.valueCon,
					rate:this.releaseValue,
				}
				this.$api.lfyAddpj(a).then(res => {
					this.$api.lfycoursepj().then(res => {
						this.pingjia = res.data
                   
					})
				})
			},
			// tabs
			handleClick(tab, event) {
				console.log(tab, event);
			},
			// Popup 弹出层
			// 分享
			open() {
				console.log('open');
			},
			
			close() {
				console.log('close');
			},
			// 立即购买
			openPay() {
				console.log('openPay');
			},
			closePay() {
				console.log('closePay');
			},

			// 分享
			// share() {
			// 	console.log('分享成功')
			// 	this.show = false
			// 	this.show2=true
			// 	setTimeout(()=>{
			// 		this.show2=false
			// 	},2000)
			// },

			// 分享
			share() {
				console.log('分享成功')
				this.show = false
				this.$refs.uToast.show({
					type: 'success',
					message: "分享成功",
				}, )
			},
			// 立即购买
			pay() {
				console.log('支付成功')
				// this.showPay = false
				this.$refs.uToast.show({
					type: 'success',
					message: "支付成功",
				}, )
				this.noPay = !this.noPay
				this.yesPay = !this.yesPay
				// this.payStyle = index
			},

			// 
			change(e) {
				console.log('change', e);
			},

			// 路由-课程讨论
			getCourseDiscuss(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/Home/lfyCourseDiscuss'
					// url: `/pages/Home/lfyCourseDiscuss?id=${item.id}`,
				})
			},
			// 路由-讨论详情
			getDiscussDetails(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/Home/lfyDiscussDetails?id=${item.id}`,

				})
			},

		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	// 课程主题
	// video
	.course_video {
		width: 100%;
	}

	// 
	.lfy_course_con {
		padding: 0 30upx 20upx;
		background-color: #fafafa;

		.course_con {
			display: flex;
			justify-content: space-between;
			height: 70upx;
			line-height: 70upx;

			.name {
				color: #323232;
				font-size: 32upx;
			}

			.original_price {
				color: #8fc31f;
				font-size: 32upx;
			}

			.class_hour {
				color: #646464;
				font-size: 28upx;
			}

			.join_number {
				color: #646464;
				font-size: 28upx;
			}

			.share {
				color: #646464;
				font-size: 28upx;

				.share_img {
					width: 20%;
					margin-right: 10upx;
				}
			}

			.buy_btn {
				background-color: #8fc31f;
				color: #fff;
				padding: 0 30upx;
				font-size: 28upx;
				border-radius: 10upx;
			}
		}

	}

	// tabs
	::v-deep .el-tabs__item.is-active {
		color: #8fc31f;
	}

	::v-deep .el-tabs__active-bar {
		background-color: #8fc31f;
	}

	::v-deep .el-tabs__item {
		color: #646464;
		font-size: 28upx;
		font-weight: 400;
	}

	::v-deep .el-tabs__nav-scroll {
		display: flex;
		justify-content: space-around;
		background-color: #f0f0f0;
	}

	::v-deep .el-tabs__nav-wrap {
		box-shadow: 0upx 10upx 40upx #efeeee;
	}

	::v-deep .el-tabs__header {
		margin-bottom: 0;
	}

	// content
	.lfy_con_container {
		padding: 0 30upx;
	}

	.con_box {
		padding: 30upx 0;
		border-top: 2upx solid #cbcbcb;

		.lfy_title {
			color: #323232;
			font-size: 28upx;
			text-align: center;
			height: 60upx;
			line-height: 60upx;
		}

		.intro {
			color: #646464;
			font-size: 24upx;
			text-indent: 40upx;
		}

		.teacher_info {
			display: flex;
			justify-content: space-around;
			color: #646464;
			padding: 0 50upx;

			.teacher_img {
				width: 100upx;
				height: 100upx;
			}

			.teacher_name {
				font-size: 28upx;
				line-height: 100upx;
			}

			.teacher_job {
				font-size: 24upx;
			}
		}

		.for_people {
			color: #646464;
			font-size: 24upx;
			text-align: center;
		}

		.attention {
			color: #646464;
			font-size: 24upx;

		}
	}

	// Popup 弹出层
	/deep/ .u-popup__content {
		border-radius: 20upx;
		width: 80%;
	}

	// 分享
	.share_box {
		padding: 40upx;

		span {
			display: inline-block;
			width: 33%;
			text-align: center;

			img {
				width: 50%;
			}
		}

		.span_mar_top {
			margin-top: 50upx;
		}
	}

	// 立即购买
	.pay_box {
		p {
			color: #646464;
			font-size: 32upx;
			text-align: center;
			height: 100upx;
			line-height: 100upx;
			border-bottom: 2upx solid #cbcbcb;
			// background-color: #fafafa;
		}

		// .pay{
		// 	background-color: #eaeaea;
		// }
	}


	// 课程评价
	// content
	// 评价
	.release_rate{
		/deep/.uni-rate{
					margin-top: 20upx;
				}
	}
	
	.rate_box {
		/deep/.uni-rate{
					margin-top: 20upx;
				}
		display: flex;
		border-bottom: 2upx solid #cbcbcb;
		height: 80upx;
		line-height: 80upx;
		padding: 0 30upx;

		.rate_title {
			color: #171717;
			font-size: 28upx;
		}

		.no_rate {
			color: #cbcbcb;
			font-size: 24upx;
		}
		
	}

	// 沙发
	.sofa_box {
		text-align: center;
		padding: 80upx 0;

		.sofa_img {
			width: 15%;
		}

		p {
			color: #909090;
			font-size: 24upx;
		}
	}

	.fixed_box {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	// 发布
	.release_box {
		display: flex;
		background-color: #e0e0e0;
		padding: 10upx 0 10upx 30upx;
		height: 60upx;
		line-height: 60upx;

		/deep/ .u-input--square {
			background-color: #fff;
			height: 60upx;
			line-height: 60upx;
			text-indent: 10upx;
		}

		.release_btn {
			color: #8fc31f;
			font-size: 34upx;
			padding: 0 50upx;
		}
	}

	// 
	.evaluate_box_mar {
		margin-bottom: 200upx;
	}

	.evaluate_box {
		display: flex;
		border-bottom: 2upx solid #cbcbcb;
		margin: 0 30upx;
		padding: 30upx 0;

		.head_portrait {
			width: 10%;
			height: 10%;
		}

		.evaluate_con {
			margin-left: 20upx;

			.con_1 {
				display: flex;
				height: 50upx;
				line-height: 50upx;

				.user_name {
					color: #171717;
					font-size: 24upx;
				}

				.evaluate_rate {
					display: flex;
					margin-left: 50upx;

					.rate_title {
						color: #171717;
						font-size: 22upx;
					}
				}
			}

			.date {
				color: #909090;
				font-size: 22upx;
			}

			.content {
				color: #171717;
				font-size: 24upx;
			}
		}
	}

	// 课程讨论
	// content
	/deep/.u-button--success {
		background-color: #8fc31f;
		width: 95%;
		margin: 100upx auto;
	}

	.discuss_box {
		border-bottom: 2upx solid #cbcbcb;
		padding: 10upx 30upx;

		p {
			height: 60upx;
			line-height: 60upx;
		}

		.topic {
			color: #171717;
			font-size: 28upx;
		}

		.source {
			color: #646464;
			font-size: 24upx;
		}

		.dis_con_3 {
			color: #646464;
			font-size: 22upx;
			text-align: right;

			.join {
				margin-left: 60upx;
			}
		}
	}
</style>
